<template>
  <div class="h5-tab-control">
    <div
      v-for="tab in tabs"
      :key="tab.name"
      class="tab-item"
      :class="{ active: modelValue === tab.name }"
      @click="$emit('update:modelValue', tab.name)"
    >
      {{ tab.label }}
    </div>
  </div>
</template>

<script setup>
defineProps({
  modelValue: String,
  tabs: Array,
});

defineEmits(["update:modelValue"]);
</script>

<style lang="scss" scoped>
.h5-tab-control {
  height: 44px;
  background: #1e1f3a;
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  .tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    position: relative;

    &.active {
      color: #4080ff;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 2px;
        background: #4080ff;
        border-radius: 1px;
      }
    }
  }
}
</style>
